<template>
  <div class="inventory">
    <div class="shadow_box" :style="{ display: showBox }"></div>

    <div class="success_box" :style="{ display: showBox }">
      <div class="box_top">
        <p>客户库存调转成功</p>
        <i @click="closeBox" class="el-icon-close"></i>
      </div>

      <div class="box_content">
        <p>客进序号</p>
        <p type="text">{{ number1 }}</p>
        <p @click="copy">复制</p>
      </div>

      <div class="box_content">
        <p>客退序号</p>
        <p>{{ number2 }}</p>
        <p @click="copy1">复制</p>
      </div>
      <el-button @click="closeBox" class="box_button" type="primary"
        >确定</el-button
      >
    </div>

    <div class="ic-top">
      <p>客户库存调转</p>
      <i class="el-icon-close" @click="closeInventory"></i>
    </div>

    <div class="it-info">
      <div>
        <p>调入(总店)</p>
        <!-- <el-input @blur="query" v-model="inputCustomerNo"></el-input> -->
        <el-select
          style="width: 200px"
          @change="change"
          filterable
          v-model="inputCustomerNo"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value + Math.random()"
            :label="item.labe"
            :value="item.value"
          >
          </el-option>
        </el-select>

        <p>调出(分店)</p>
        <!-- <el-input v-model="outCustomerList"></el-input> -->
        <el-select
          style="width: 200px"
          multiple
          collapse-tags
          filterable
          v-model="customerNo"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options1"
            :key="item.value + Math.random()"
            :label="item.labe"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <!-- <p>单据序号</p>
        <el-input v-model="no"></el-input> -->
      </div>
      <!-- <div>
        <p>截止日期</p>
        <el-date-picker
          v-model="cutOffDate"
          type="date"
          placeholder="截止日期">
        </el-date-picker>
        <el-select
          v-model="selected"
          multiple
          collapse-tags
          style="margin-left: 20px;">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div> -->
    </div>

    <div class="it-foot">
      <el-progress
        :width="50"
        :text-inside="true"
        :stroke-width="16"
        :percentage="Number(speed) * 20"
        v-if="!isNaN(Number(speed) * 20)"
      ></el-progress>
      <div class="operation">
        <el-button @click="closeInventory">取消</el-button>
        <el-button :disabled="dis" @click="preservation" type="primary"
          >保存</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import {
  postClient1,
  getClient2,
  getClient,
  getShop
} from '../../../../network/client'
import { internetProtocol } from '../../../../config/ip'
export default {
  created() {
    getClient2().then((res) => {
      //获取所有客户   调出客户
      // console.log(res.data)
      var list = res.data.data
      for (const i in list) {
        let item = list[i]
        // console.log(item)
        this.options.push({ label: item, value: item })
      }
    })
    // var usid = cookie.get('jxSoftWareCustomerId')
    // function getCookie(jxSoftWareCustomerId){
    //   var cookieObj={},
    //       cookieSplit=[],
    //       // 以分号（;）分组
    //       cookieArr=document.cookie.split(";");
    // for(var i=0,len=cookieArr.length;i<len;i++)
    //     if(cookieArr[i]) {
    //         // 以等号（=）分组
    //         cookieSplit=cookieArr[i].split("=");
    //         // Trim() 是自定义的函数，用来删除字符串两边的空格
    //         cookieObj[cookieSplit[0].Trim()]=cookieSplit[1].Trim();
    //     }
    //     console.log(cookieObj['jxSoftWareCustomerId'])
    // }

    // var tempArr = document.cookie.split('='); //获取cookie
    // // split() 方法用于把一个字符串分割成字符串数组
    // var tempObj = {};
    // // 存成一个对象，数组第一个值为键，第二个为值
    // tempObj[tempArr[0]] = tempArr[1];
    // console.log(tempObj);
    // console.log(tempObj.username);

    // this._getClient2()
    var jxa = document.cookie.match(RegExp('jxUser' + '=[^;]+'))[0] //獲取操作員
    var str = jxa.split('=')[1]
    // console.log(str)
    var ws = new WebSocket(`wss://${internetProtocol}/webSocket/` + str) // 建立 web socket 连接成功触发事件

    ws.onopen = function (e) {
      var json = ''
      ws.send(json) //可以给后台发送参数
      // console.log(e)
    } //接收到消息的回调方法 //接收到消息的回调方法

    //     ws.onmessage = function (event) {
    //         let _this = this
    // //         alert('数据回来了'+event.data)
    //         console.log(event.data);//后台不间断发送数据，持续接收。
    //         if(event.data == 'scanSuccess'){
    //             // _this.showkeepout = 'block'
    //             _this.payWay = false
    //             console.log(1111111111111111)
    //         }
    //     }
    ws.onmessage = (event) => {
      // console.log(event.data)
      this.speed = event.data
      if (event.data == '5') {
        this.dis = false
      }
    } //断开 web socket 连接成功触发事件
    ws.onclose = function () {
      // console.log('调转连接已关闭...')
    }
    ws.onerror = function (event) {
      //如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
      // console.log(error)
    }
  },
  data() {
    return {
      dis: false,
      speed: '0',
      showBox: 'none',
      // datalenght:'',//是否有此调入客户
      inputCustomerNo: '',
      number1: '',
      number2: '',
      // outCustomerList: '',
      customerNo: '',
      options: [],
      options1: [],
      // no: '',
      // cutOffDate: '',
      selected: []
    }
  },
  methods: {
    change() {
      // console.log(this.inputCustomerNo)
      this.customerNo = ''
      this.options1 = []
      getShop({ headquartersNo: this.inputCustomerNo }).then((res) => {
        // console.log(res.data.data)
        if (res.data.code == 200) {
          res.data.data.forEach((e) => {
            this.options1.push({ label: e, value: e })
          })
        }
      })
    },
    //复制
    copy() {
      this.$copyText(this.number1).then(
        function (e) {
          alert('已复制')
        },
        function (e) {
          alert('复制失败')
        }
      )
    },
    copy1() {
      this.$copyText(this.number2).then(
        function (e) {
          alert('已复制')
        },
        function (e) {
          alert('复制失败')
        }
      )
    },
    closeInventory() {
      this.$emit('closeInventory')
    },
    preservation() {
      if (this.inputCustomerNo == '' || this.customerNo == '') {
        this.$message.warning({ message: '请选择调入和调出', offset: 400 })
        return
      }
      // this.dis = true
      let obj = {
        inputCustomerNo: this.inputCustomerNo,
        outCustomerList: this.customerNo
      }
      // console.log(JSON.stringify(obj))

      postClient1(JSON.stringify(obj)).then((res) => {
        // console.log(res.data)
        if (res.data.code == 200) {
          this.speed = '0'
          this.showBox = 'block'
          this.number1 = res.data.data.outSequence
          this.number2 = res.data.data.inputSequence
          // console.log(res.data.data.outSequence)
          // console.log(res.data.data.inputSequence)
        } else if (res.data.code == 11500) {
          this.$message.error({
            message: '调转失败,调出没有库存可调转'
          })
          this.speed = '0'
          this.dis = false
        } else {
          this.$message.error({
            message: '调转失败'
          })
          this.dis = false
          this.speed = '0'
        }
      })
    },
    // query(){
    //   let obj = {no:this.inputCustomerNo}
    //   getClient(obj).then(res=>{
    //     console.log(res)
    //     if(res.data.data.length == 0){
    //       this.datalenght = 'm'
    //       this.$message({
    //         type:'warning',
    //         message:'没有该客户数据'
    //       })
    //     }else if(res.data.length !== 0){
    //       this.datalenght = 'y'
    //     }
    //   })
    // },

    closeBox() {
      this.showBox = 'none'
    }
  },
  watch: {
    inputCustomerNo(a, b) {
      this.inputCustomerNo = a.toUpperCase().trim()
    }
  }
}
</script>

<style scoped>
.inventory {
  position: fixed;
  top: 25%;
  left: 50%;
  width: 650px;
  height: 175px;
  transform: translateX(-50%);
  background-color: #fff;
  box-sizing: border-box;
  z-index: 99;
  position: absolute;
}
.shadow_box {
  z-index: 100;
  position: fixed;
  top: 0;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translateX(-50%);
  background-color: #fff;
  box-sizing: border-box;

  background-color: #000;
  opacity: 0.2;
}
.success_box {
  text-align: center;
  width: 550px;
  height: 230px;
  position: absolute;
  /* border: 1px solid black; */
  top: 50%;
  left: 50%;
  margin: -115px 0 0 -225px;
  z-index: 101;
  background: #fff;
}
.box_top {
  width: 100%;
  height: 50px;
  background: #f2f2f2;
  padding: 14px 15px;
  justify-content: space-between;
  display: flex;
}
.box_button {
  margin: 20px 0 0 360px;
}
.box_content {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}
.box_content p:last-child {
  color: #017aff;
}
.box_content p:last-child:hover {
  cursor: pointer;
}
.box_top p {
  font-weight: 700;
}
.ic-top {
  background-color: #f2f2f2;
  height: 50px;
  margin-bottom: 15px;
}
.ic-top p {
  float: left;
  margin: 15px 0 0 20px;
  font-weight: bolder;
}
.ic-top i {
  width: 50px;
  float: right;
  text-align: center;
  line-height: 50px;
}

.it-info {
  box-sizing: border-box;
  padding: 0 15px;
  margin-bottom: 20px;
}
.it-info p {
  display: inline;
  margin: 0 5px 0 15px;
}
.it-info div:first-child {
  margin-bottom: 10px;
}
.it-foot .operation {
  float: right;
  margin-right: 18px;
}
</style>

<style>
.it-info .el-input {
  width: 200px;
}
.it-info .el-input--suffix {
  margin-right: 15px;
}
.it-foot .el-progress {
  float: left;
  margin-left: 50px;
  width: 200px;
}
</style>
